.archive-Card {
    border-radius: 0.729vw;
    background-color: rgb(var(--color-background-input));
    border-left: 14px solid;
    padding: 10px;
    padding-right: 25px;
    display: flex;
    justify-content: space-between;

    &:nth-of-type(1) {
        border-left-color: rgba(98, 125, 162, 1);
    }
    &:nth-of-type(2) {
        border-left-color: rgba(130, 98, 162, 1);
    }
    &:nth-of-type(3) {
        border-left-color: rgba(162, 130, 98, 1);
    }
    &:nth-of-type(4) {
        border-left-color: rgba(98, 162, 147, 1);
    }

    :global {
        .label {
            padding: 0;
            font-size: 16px;
        }
        .content {
            font-size: 30px;
        }
        .icon-wrap {
            align-self: center;
            svg {
                width: 2.031vw;
                height: 2.031vw;
            }
        }

        @media screen and ($phone) {
            padding: 6px;
            padding-right: 12px;

            .label {
                font-size: 14px;
            }
            .content {
                margin-top: 5px;
                font-size: 16px;
            }

            .icon-wrap {
                svg {
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }
}
